<template>
  <el-dialog
    v-model="show"
    :title="title"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @closed="closed"
  >
    <Scrollbar>
      <dialog-show-inner v-model:loading="loading" @close="closeDialog" @confirm="confirmDialog" ref="dialogShowInner" :data="pageData"></dialog-show-inner>
    </Scrollbar>

    <template #footer v-if="confirmButtonText || cancelButtonText">
      <el-button :loading="loading" @click="confirmDialog()" type="primary" v-if="confirmButtonText">{{confirmButtonText}}</el-button>
      <el-button @click="closeDialog" v-if="cancelButtonText">{{ cancelButtonText }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import Scrollbar from '@/components/Scrollbar.vue';
/**
 Author: 蒋鑫强
 Time: 2023/6/2
 Description:
 */
export default {
  name: 'DialogShow',
  components: {Scrollbar},
  props: {
    //确定按钮文案，传空不显示
    confirmButtonText: {
      type: String,
      default: '确定'
    },

    //取消按钮文案，传空不显示
    cancelButtonText: {
      type: String,
      default: '取消'
    },

    title: {
      type: String,
      default: ''
    },

    width: {
      type: [String, Number],
      default: '600px'
    },

    pageData: {
      type: Object,
      default: () => {}
    },

    //关闭弹窗且动画结束后触发
    closed: {
      type: Function,
      default: () => {}
    },

    //点击确认按钮时触发
    confirm: {
      type: Function,
      default: () => {}
    }
  },

  data() {
    return {
      show: false,
      loading: false
    };
  },

  methods: {
    closeDialog() {
      this.show = false;
    },

    confirmDialog(data) {
      if (data || !this.$refs.dialogShowInner.submit) {
        this.confirm(data);
        this.closeDialog();
      } else {
        this.$refs.dialogShowInner.submit();
      }
    }
  },

  mounted() {
    this.show = true;
  }
}
</script>

<style lang="less">
.el-overlay-dialog {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .el-dialog {
    max-height: 85%;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;

    .el-dialog__body {
      flex: 1;
      overflow: hidden;
      padding: 0;

      .el-scrollbar__view {
        padding: 10px 20px;
      }
    }
  }
}
</style>
